<template>
  <div>
    <div>
      <img src="../assets/2.png" class="img">
    </div>
    <div class="log">网易云音乐</div>
      <button class="btn" @click="back()" style=" margin-left: 10%;">
      <i class="el-icon-arrow-left"> </i>
      </button>
      <button class="btn" @click="advance()" style="margin-left: 10px;">
      <i class="el-icon-arrow-right"></i>
      </button>      
      <div class="search-input">  
       <el-input class="input" placeholder="搜索" v-model="keywords" prefix-icon="el-icon-search" @keyup.enter.native="searchEnterFun">
      </el-input>
    </div>
    <div class="user-page">
        <img :src=this.consumerAvatar>
    </div>

    <span class="el-dropdown-link" @click="log()">
          {{ this.consumerName }}
    </span>
  
    </div>
</template>

<script>

import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      keywords:'',
    }
  },
  computed: {
    ...mapGetters([
      'logStatue',
      'consumerId',
      'consumerName',
      'consumerAvatar',
      'consumerIsLogin'
    ]),
  },
  beforeRouteUpdate(to, from, next) {
                this.keywords = to.query.keywords
                next();
  },
  methods: {
    log(){
      if (!this.consumerIsLogin){
        this.$store.commit('setLogStatue', true)
      }else{
        this.$store.commit('setConsumerMenu', true)
      }
    },
    handleCommand(command){
      if(command === 'logout'){
        this.$router.push('/')
      }
    },
    back(){
      history.back();
    },
    advance(){
      history.forward();
      this.id = to.query.id
    },
    searchEnterFun(){
      this.$router.push({
        path:'/search',
        query:{
          keywords : this.keywords
        }
      })
    }
  }
}
</script>

<style  scoped>
.img{
  user-select: none;
  height: 40px;
  float: left;
  border-radius: 100%;
  margin-top: 20px;
}
.log{
  float: left;
  margin-left: 20px;
  user-select: none;
}
button{
  border:none;
  outline: none;
}
.btn{
  width: 30px;
  height: 30px;
  cursor: pointer;
  user-select: none;
  Border-radius:50%;
  background-color: #d14131;
  color:white;
  font-size: 18px;
  float:left;
  margin-top: 25px;
 
}
.btn:hover{
  background-color: #b93a2c;

}
.search-input{
  float: left;
  margin-left: 30px;
  position: relative;
}
::v-deep .search-input .el-input__inner {
  background-color: #dd4433; 
  border:none;
  outline: none;
  Border-radius:20px;
  height: 35px;
  color: white;
}
.user-page img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-left: 50px;
  margin-top: 20px;
  user-select: none;
}
.el-dropdown-link{
  float: left;
  margin-left: 10px;
  color: white;
  user-select: none;
  font-size: 12px;
  margin-top: 3px;

}
</style>